<template>
	<view class="search-container">
		<!-- 搜索框 -->
		<view class="search-input">
			<view class="search-input-value">
				<view class="search">
					<image src="/static/images/search/search.png"></image>
				</view>
				<input confirm-type="search" @confirm="search(searchValue)" v-model.trim="searchValue" placeholder-style="color:#A3A3A3;font-size:28upx;"
				 placeholder-class="search-placehoder" placeholder="请输入关键词" type="text">
				<image @click.stop="handleClearValue" v-show="isShowDeleate" class="delete" src="/static/images/search/deleate.png"></image>
			</view>
			<view @click="search(searchValue)" class="search-text">
				搜索
			</view>
		</view>
		<!-- 历史记录 -->
		<view class="search-hot">
			<view class="search-hot-title">
				历史记录
				<image v-if="historyKeyWord.length>0" @click="clearHistory" src="/static/images/search/delete-history.png"></image>
			</view>
			<view class="search-hot-tabs">
				<view @click="searchHistory(item)" v-for="(item,key) in historyKeyWord" :key="key">
					{{item}}
				</view>
			</view>
		</view>
		<!-- 热搜榜 -->
		<view class="search-hot">
			<view class="search-hot-title" style="padding-top: 20upx;">
				热搜榜
			</view>
			<view class="search-hot-tabs">
				<view @click="searchHot(item.value)" v-for="(item,key) in hotData" :key="key">
					<image v-if="item.isHot===1" src="../../static/images/mall/flower@2x.png"></image>
					{{item.value}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 热门数据
				hotData: [{
						value: '交友',
						isHot: 1
					},
					{
						value: '相恋',
						isHot: 1
					},
					{
						value: '约会',
						isHot: 1
					},
					{
						value: '咖啡',
						isHot: 0
					},
					{
						value: '鲜花',
						isHot: 0
					},
				],
				// 节流标识
				isShowDeleate: false,
				// 输入框值
				searchValue: '',
				// 历史记录
				historyKeyWord: []
			}
		},
		onShow() {
			let that = this;
			// 获取历史数据并展示赋值
			uni.getStorage({
				key: "keyWord",
				success: (e) => {
					if (e.data) {
						this.historyKeyWord = e.data
					}
				}
			})
		},
		computed: {

		},
		methods: {
			/**
			 * @description 清除历史搜索
			 */
			clearHistory() {
				uni.setStorage({
					key: 'keyWord',
					data: []
				})
				this.historyKeyWord = [];
			},
			/**
			 * @description 清空输入框
			 */
			handleClearValue() {
				this.searchValue = ''
			},
			/**
			 * @description  热门搜索
			 * @param {Object} value
			 */
			searchHot(value) {
				this.search(value);
			},
			/**
			 * @description 点击历史搜索 
			 * @param {Object} val
			 */
			searchHistory(val) {
				uni.navigateTo({
					url: '/pageA/search-result/search-result?keyWord=' + val,
				})
			},
			//搜索
			search(searchValue) {
				if (searchValue === '') {
					uni.showToast({
						icon: "none",
						title: '请输入搜索内容'
					})
					return false
				}
				if (this.historyKeyWord.length > 0) {
					if (this.historyKeyWord.some(item => item === searchValue)) {
						uni.setStorage({
							key: 'keyWord',
							data: this.historyKeyWord
						})
					} else {
						this.historyKeyWord.push(searchValue);
						uni.setStorage({
							key: 'keyWord',
							data: this.historyKeyWord
						})
					}
				} else {
					uni.setStorage({
						key: 'keyWord',
						data: [searchValue]
					})
				}



				uni.navigateTo({
					url: `/pageA/search-result/search-result?keyWord=${searchValue}`,
				})
				this.handleClearValue()
			},
		},
		watch: {
			//监听输入框值
			searchValue(val) {
				val === '' ? this.isShowDeleate = false : this.isShowDeleate = true
			}
		}
	}
</script>

<style scoped lang='less'>
	.search-container {
		box-sizing: border-box;
		padding: 22upx 30upx 22upx 32upx;
		background-color: #fff;
		.search-input {
			display: flex;
			height: 78upx;
			margin-bottom: 38upx;

			.search-input-value {
				flex: 1;
				height: 78upx;
				background: rgba(245, 245, 245, 1);
				border-radius: 6upx;
				position: relative;

				.search {
					width: 32upx;
					height: 34upx;
					position: absolute;
					left: 20upx;
					top: 40upx;
					transform: translateY(-50%);
					z-index: 999;

					image {
						width: 32upx;
						height: 34upx;
					}
				}

				.delete {
					width: 28upx;
					height: 28upx;
					position: absolute;
					right: 20upx;
					top: 50%;
					transform: translateY(-50%);
					z-index: 999;
				}

				input {
					height: 78upx;
					border-radius: 6upx;
					font-size: 28upx;
					padding-left: 72upx;
				}
			}

			.search-text {
				width: 88upx;
				height: 78upx;
				line-height: 78upx;
				text-align: right;
				font-size: 30upx;
				font-weight: 400;
				color: #FF5998;
			}
		}

		.search-hot {
			.search-hot-title {
				font-size: 28upx;
				font-weight: 600;
				color: #444444;
				line-height: 36upx;
				margin-bottom: 26upx;
				position: relative;
				margin-top: 10upx;

				image {
					width: 28upx;
					height: 32upx;
					position: absolute;
					right: 2upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.search-hot-tabs {
				display: flex;
				flex-flow: row wrap;

				view {
					padding: 6upx 22upx;
					background: rgba(249, 249, 249, 1);
					border-radius: 6upx;
					margin-right: 18upx;
					margin-bottom: 18upx;
					font-size: 26upx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);

					image {
						width: 26upx;
						height: 30upx;
						display: inline-block;
						vertical-align: middle;
						margin-bottom: 10upx;
						margin-right: 10upx;
					}
				}
			}
		}
	}
</style>
